.container-layout {
  width: 100%;
  height: calc(100vh - 50px - env(safe-area-inset-bottom));
  position: relative;
}

.map-wrapper {
  width: 100vw;
  height: calc(100vh - 50px);
}

.bottom-layout {
  width: 100%;
}

.map {
  width: 100%;
  height: 100%;
}

.cover-tip-wrapper {
  width: 96%;
  margin-left: 2%;
  height: 98rpx;
  margin-top: 20rpx;
  border-radius: 5rpx;
  position: relative;
}

.cover-mine {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  top: 20rpx;
  left: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-refresh {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  background: rgba(255, 255, 255, 0.336);
  border-radius: 50%;
  /* top: 120rpx;
  left: 10rpx; */
  right: 10rpx;
  bottom: 250rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.choose-mine {
  width: 90rpx;
  height: 90rpx;
  background: white;
  border-radius: 50%;
}

.choose-refresh {
  width: 60rpx;
  height: 60rpx;
  /* background: white; */
  border-radius: 50%;
}

.cover-loaction {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  bottom: 20rpx;
  left: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-scan {
  position: absolute;
  width: 200rpx;
  height: 200rpx;
  bottom: 60rpx;
  background: white;
  border-radius: 50%;
  padding: 17rpx;
}

.scan-code {
  width: 200rpx;
  height: 200rpx;
}

.cover-bigger {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  top: 250rpx;
  right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 24rpx;
}

.cover-smaller {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  top: 130rpx;
  right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 24rpx;
}

.cover-edit {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  bottom: 110rpx;
  left: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-order {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  bottom: 90rpx;
  right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-list {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  bottom: 190rpx;
  right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-set {
  width: 60rpx;
  height: 60rpx;
  background: white;
  border-radius: 10%;
  padding: 6rpx;
}

/* 新增css样式 */
.search-box {
  background: #ffffff;
  position: fixed;
  z-index: 999;
  top: 10rpx;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20rpx 24rpx;
}

.search-inner {
  background-color: #f7f8fa;
  border-radius: 2rpx;
  display: flex;
  flex: 1;
  align-items: center;
  padding: 14rpx;
  /* padding-left: 12rpx; */
}

.search-placeholder {
  color: #c8c9cc;
  font-size: 24rpx;
}

.search-box .custom-class {
  border-radius: 18rpx;
}


.tools-box {
  box-sizing: border-box;
  background: #ffffff;
  width: 100%;
  position: absolute;
  bottom: 0;
  /* border: 1px solid red; */
  z-index: 9;
  border-radius: 36rpx 36rpx 0rpx 0rpx;
  padding: 16rpx;
  display: flex;
}

.tools-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

/* .tools-bg {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
} */

.electric {
  background: linear-gradient(to bottom right, #559bf6, #6cb3f7);
}

.scan {
  background: linear-gradient(to bottom right, #ff7200, #f5c16f);
}

.order {
  background: linear-gradient(to bottom right, #833aff, #c590f7);
}

.tools-icon {
  width: 50rpx;
  height: 50rpx;
}

.tools-name {
  font-size: 24rpx;
  color: #666666;
}

/* 定义动画名称 */
@keyframes scan {
  0% {
    transform: translateX(-50%) translateY(5rpx);
  }

  50% {
    transform: translateX(-50%) translateY(28rpx);
  }

  100% {
    transform: translateX(-50%) translateY(5rpx);
  }
}

/* 应用动画到元素上 */
.scan-animation {
  position: absolute;
  width: 38rpx;
  height: 38rpx;
  margin: auto;
  border-radius: 4rpx;
  background: linear-gradient(to left, #ffffff, #ffffff) left top no-repeat, linear-gradient(to bottom, #ffffff, #ffffff) left top no-repeat,
    linear-gradient(to left, #ffffff, #ffffff) right top no-repeat, linear-gradient(to bottom, #ffffff, #ffffff) right top no-repeat,
    linear-gradient(to left, #ffffff, #ffffff) left bottom no-repeat, linear-gradient(to bottom, #ffffff, #ffffff) left bottom no-repeat,
    linear-gradient(to left, #ffffff, #ffffff) right bottom no-repeat, linear-gradient(to left, #ffffff, #ffffff) right bottom no-repeat;
  background-size: 2px 6px, 6px 2px, 2px 6px, 6px 2px;
}

.scan-bg {
  /* width: 30rpx;
  height: 38rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 6rpx;
  transform: translateX(-50%) translateY(-50%); */
}

.scan-animation-node {
  width: 20rpx;
  height: 4rpx;
  border-radius: 4rpx;
  background-color: #fff;
  position: absolute;
  /* top: 15rpx; */
  left: 50%;
  /* transform: translateX(-50%); */
  animation: scan 2s infinite ease-in-out;
}

.input-box {
  display: flex;
  align-items: center;
}

.icon_input {
  width: 35rpx;
  height: 35rpx;
  margin-right: 20rpx;
}

.my-cus-box {
  background-color: #ffffff;
  border-radius: 16rpx;
  color: #000;
  padding: 12rpx 8rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.my-cus-box-active {
  /* border: 3rpx solid #FF6B03 ; */
  /* padding: 24rpx 8rpx; */
}

.left-xian {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50rpx;
  height: 50rpx;
  color: #ff6b03;
  border-radius: 50%;
  /* background-color: #FDF4EC; */
  background-color: rgba(255, 153, 43, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  line-height: 50rpx;
  text-align: center;
  margin-right: 10rpx;
  padding: 5rpx;
}

.right-num {
  color: #999;
  font-size: 24rpx;
  min-width: 100rpx;
}

.right-price {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.right-price-icon {
  font-size: 22rpx;
}

.kuai,
.man {
  margin-right: 16rpx;
}

.zhanwei {
  width: 10rpx;
  height: 10rpx;
  background: red;
}

.station-detail {
  background-color: #fff;
  width: 80%;
  padding: 16rpx;
  position: absolute;
  bottom: 65rpx;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
}

.station-title {
  font-size: 30rpx;
  color: #2c2c2c;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.station-title-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.station-type {
  margin-top: 5rpx;
}

.station-price {
  margin-top: 5rpx;
  font-size: 36rpx;
  font-weight: 600;
  color: #ff7200;
}

.price-small {
  font-size: 24rpx;
}

.price-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kuai,
.man {
  color: #ff6b03;
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #ff6b03;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8rpx;
  padding: 2rpx;
  background-color: rgba(255, 107, 3, 0.1);
  margin-left: 10rpx;
}

.man {
  color: #28cd78;
  border: 2rpx solid #28cd78;
  background-color: rgba(40, 205, 120, 0.1);
}

.kuai-box,
.man-box {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

.device-item-distance {
  margin-top: 3rpx;
  font-size: 24rpx;
  color: gray;
  border-top: 2rpx solid #eee;
  display: flex;
  align-items: center;
  padding: 16rpx 0 0rpx;
}

.left-area {
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}

.icon-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.icon-area-img {
  width: 25rpx;
  height: 25rpx;
  margin-right: 5rpx;
}

.uni-tag-text--warning {
  color: #ff7200 !important;
}

.uni-tag--warning--inverted {
  border-color: #ff7200 !important;
}